<template>
	<view :style="skin" :class="pageType =='home'?'overdue':'overdue overdueHeight'">
		<view class="overdueList" v-for="item in overdueList" :key="item.leaseId">
			<view class="overdueListLeft">
				<u--image shape="circle" :src="item.avatar" width="75px" height="75px"></u--image>
				<block>
					<!-- <view class="leftTips">
						ID:{{item.customerAccount}}
					</view> -->
					<view class="leftTips">
						{{$t('lease.rentalTimes')}}:{{item.rentNum}}
					</view>
					<view class="leftTips">
						{{$t('lease.overdueNumber')}}:{{item.overdueNum}}
					</view>
				</block>

			</view>
			<view class="overdueListRight">
				<view class="rightTips">
					{{$t('lease.productModel')}}: {{item.productModel}}
				</view>
				<view class="rightTips">
					{{$t('lease.productID')}}: {{item.productId}}
				</view>
				<view class="rightTips">
					{{$t('lease.name')}}: {{item.nickname}}
				</view>
				<view class="rightTips" @click="handleCall(item.phone)">
					{{$t('lease.phone')}}: {{item.phone}}
					<text class="iconfont icon-a-ze-phone-circle-o1 iconRight"></text>
				</view>
				<view class="rightTips">
					{{$t('lease.address')}}: {{item.userAddress}}
				</view>
				<view class="rightTips">
					{{$t('lease.surety')}}: {{item.bondsMan}}
				</view>
				<view class="rightTips" @click="handleCall(item.bondsManPhone)">
					{{$t('lease.suretyPhone')}}: {{item.bondsManPhone}}
					<text class="iconfont icon-a-ze-phone-circle-o1 iconRight"></text>
				</view>
				<view class="rightTips">
					{{$t('lease.overdueTime')}}: {{item.overdueDay}} H
				</view>
				<view class="rightTips">
					{{$t('lease.remindNumber')}}: {{item.remind}} 
				</view>
				<!-- 	<view class="rightTips">
					下次提示时间: {{item.nextTime}}
				</view> -->
				<view class="rightTips" @click="handleInfo(item.leaseId)">
					{{$t('lease.history')}}
					<text class="iconfont icon-a-mingchengarrow_right iconRight"></text>
				</view>
			</view>
		</view>

		<u-popup :show="overdueShow" :round="16" mode="center">
			<view class="popupBox">
				<view class="overTitle">
					{{$t('lease.overdueInfo')}}
				</view>
				<view class="overdueList popupView">

					<view class="overdueListLeft">
						<u--image shape="circle" :src="overdueInfo.avatar" width="75px" height="75px"></u--image>
						<block>
							<!-- <view class="leftTips">
								ID:{{overdueInfo.customerAccount}}
							</view> -->
							<view class="leftTips">
								{{$t('lease.rentalTimes')}}:{{overdueInfo.rentNum}}
							</view>
							<view class="leftTips">
								{{$t('lease.overdueNumber')}}:{{overdueInfo.overdueNum}}
							</view>
						</block>

					</view>
					<view class="overdueListRight">
						<view class="popupRightTips">
							{{$t('lease.productModel')}}: {{overdueInfo.productModel}}
						</view>
						<view class="popupRightTips">
							{{$t('lease.productID')}}: {{overdueInfo.productId}}
						</view>
						<view class="popupRightTips">
							{{$t('lease.name')}}: {{overdueInfo.nickname}}
						</view>
						<view class="popupRightTips">
							{{$t('lease.phone')}}: {{overdueInfo.phone}}
							<text class="iconfont icon-a-ze-phone-circle-o1 iconRight"></text>
						</view>
						<view class="popupRightTips">
							{{$t('lease.address')}}: {{overdueInfo.userAddress}}
						</view>
						<view class="popupRightTips">
							{{$t('lease.surety')}}: {{overdueInfo.bondsMan}}
						</view>
						<view class="popupRightTips">
							{{$t('lease.suretyPhone')}}: {{overdueInfo.bondsManPhone}}
							<text class="iconfont icon-a-ze-phone-circle-o1 iconRight"></text>
						</view>
						<view class="popupRightTips">
							{{$t('lease.overdueTime')}}: {{overdueInfo.overdueDay}} H
						</view>

					</view>
				</view>

				<view class="overdueInfo">
					<view class="infoTitle">
						<!-- 第{{overdueInfo.remind + 1}}次跟踪此用户逾期 -->
						<text v-if="overdueInfo.remind == 0">{{$t('lease.overdueTracking1')}}</text>
						<text v-else-if="overdueInfo.remind == 1">{{$t('lease.overdueTracking2')}}</text>
						<text v-else-if="overdueInfo.remind == 2">{{$t('lease.overdueTracking3')}}</text>
					</view>
					<view class="">
						{{$t('lease.overdueReason')}}:<u--input :placeholder="$t('lease.pleEnter')" border="surround"
							v-model="overdueInp.overdueReason"></u--input>
					</view>
					<view class="" @click="dateShow = true">
						{{$t('lease.returnTime')}}:
						<view class="returnTimeBox" @click="dateShow = true">
							{{overdueInp.returnTime}}
						</view>

						<!-- <u--input disabled :placeholder="$t('lease.pleEnter')" border="surround" v-model="overdueInp.returnTime"></u--input> -->
					</view>
					<view class="">
						{{$t('lease.detailed')}}:
						<u--input :placeholder="$t('lease.pleEnter')" border="surround" v-model="overdueInp.details"></u--input>
					</view>
				</view>

				<view class="overdueBtn">
					<u-button color="var(--subjectColor)" @click="handleSubmit">{{$t('lease.trace')}}
					</u-button>
				</view>

			</view>
		</u-popup>

		<u-datetime-picker cancelText="Cancel" confirmText="Confirm" @cancel="dateShow = false" @confirm="confirmDate" :show="dateShow" v-model="valueDate"
			mode="datetime" :minDate="data1" :maxDate="data2"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getLease,
		addLease,
		getLeaseToId
	} from '@/utils/sql/sqllease.js'
	import { getUserAll } from '@/utils/sql/sqlUser.js'

	import {
		formatDateTime,
		getNewYMD,
		getNewYMDHMS
	} from '@/utils/index.js'
	import {
		cellPhoneAuthority
	} from '@/utils/jurisdiction.js'
	export default {
		props: {
			overdueList: { //逾期列表
				type: Array,
				default: []
			},
			pageType: {
				type: String,
				default: ''
			},
			overdueIds: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				valueDate: '',
				data2: new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 * 365,
				data1: new Date(new Date().toLocaleDateString()).getTime(),
				userSrc: '',
				overdueShow: false,
				value: '',
				list: [],
				dateShow: false,
				overdueListIds: [],

				overdueInfo: {}, //当前逾期的具体信息
				reMindIndex: 0, //overdueList 查找信息的下标

				overdueInp: {
					overdueReason: '',
					returnTime: '',
					details: ''
				},
				userArr:[],
				
			};
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},
		mounted() {
			this.getDBUser()
			if (this.pageType == 'home') {
				console.log(this.overdueIds);
				if (this.overdueIds.length == 0) return

				let arr = this.overdueIds
				if (arr.length >= 2) {
					arr.sort((a, b) => parseInt(a.expirationTime) - parseInt(b.expirationTime))
				}

				this.overdueListIds = arr

				let newDate = new Date().getTime()
				this.overdueListIds.forEach(item => {
					if (item.nextPopupTime <= newDate) {

					}
				})
				let id = this.overdueListIds[this.reMindIndex].leaseId

				this.getLeaseInfo(id)
			}
			

		},
		methods: {
			confirmDate(e) {
				var now = new Date(parseInt(e.value));
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth() + 1; //得到月份
				var date = now.getDate(); //得到日期
				var h = now.getHours();
				var m = now.getMinutes();
				var s = now.getSeconds()
				if (month < 10) {
					month = '0' + month
				}
				if (date < 10) {
					date = '0' + date
				}
				
				if (h < 10) {
					h = '0' + h
				}
				
				if (m < 10) {
					m = '0' + m
				}
				
				if (s < 10) {
					s = '0' + s
				}
				
				this.overdueInp.returnTime = `${year}-${month}-${date} ${h}:${m}:${s}`
				this.dateShow = false
			},
			handleSubmit() {
				let {
					overdueReason,
					returnTime,
					details
				} = this.overdueInp
				if (overdueReason == '' || returnTime == '' || details == '') {
					uni.showToast({
						title: this.$t('lease.detailed'),
						icon: 'none'
					})
					return false
				}
				let obj = []
				if(this.overdueInfo.history == 'null'){
					obj = []
				}else{
					obj =  JSON.parse(this.overdueInfo.history);
				}
				
				// obj.createTime = getNewYMDHMS()
				let newDate = new Date().getTime()
				let overObj = {
					overdueReason:overdueReason,
					returnTime:returnTime,
					details:details,
					createTime:getNewYMDHMS()
				}
				obj.push(overObj)
				let remind = this.overdueInfo.remind == 'null' ? '0' : this.overdueInfo.remind
				let submitObj = {
					leaseId: this.overdueInfo.leaseId,
					remind: (parseInt(remind) + 1).toString(),
					history: JSON.stringify(obj),
					// 下一次弹框时间为一小时后 调试
					nextPopupTime: (newDate + 60 * 60 * 1000).toString(),
					overTime: getNewYMDHMS(),
					iSync:0,
				}
				console.log(submitObj);
				addLease(submitObj).then(res => {
					console.log(res);
					this.reMindIndex++
					this.overdueInfo = {}
					this.overdueInp = {
						overdueReason: '',
						returnTime: '',
						details: ''
					}
					if (this.reMindIndex == this.overdueListIds.length) {
						this.overdueShow = false
						// this.getlist()
						this.$emit('getoverList')
					} else {
						let id = this.overdueListIds[this.reMindIndex].leaseId
						this.getLeaseInfo(id)
					}

				})


			},
			getLeaseInfo(leaseId) {
				let newDate = new Date().getTime()
				let nextPopupTime = this.overdueListIds[this.reMindIndex].nextPopupTime
				if (nextPopupTime <= newDate) {
					getLeaseToId(leaseId).then(res => {
						console.log("================",res);
						res.data.map(item =>{
							let index = this.userArr.findIndex(ele =>{return ele.customerAccount == item.customerAccount});
							return item.rentNum = this.userArr[index].rentNum,item.overdueNum = this.userArr[index].overdueNum
						})	
							
						this.overdueInfo = res.data[0]
						this.overdueShow = true

					})
				}

			},
		async	getDBUser(){
				let uRes = await getUserAll();
				this.userArr = uRes.data
			},
			handleInfo(leaseId) {
				uni.navigateTo({
					url: `/pages/home/overdueRecord/overdueRecord?leaseId=${leaseId}`
				})
			},
			handleCall(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, //要拨打的手机号
					success: (res) => {
						console.log("调用成功")
					},
					fail: (res) => {
						console.log('调用失败!')
					}
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.overdue {
		width: calc(100% - 32px);
		margin: 16px auto;
		box-sizing: border-box;
		overflow-y: auto;
		height: calc(100% - 60px);


		.overTitle {
			height: 44px;
			text-align: center;
			line-height: 44px;
			font-size: 24px;
			font-weight: 600;
			color: #FF4A4A;
		}

		.overdueList {
			width: 100%;
			padding: 16px 0;
			box-sizing: border-box;
			height: 234px;
			display: flex;
			background-color: #fff;
			border: 1px solid #ccc;
			margin-bottom: 16px;

			.overdueListLeft {
				width: 102px;
				height: calc(100% - 16px);
				margin-top: 8px;
				border-right: 1px solid #ccc;
				display: flex;
				flex-direction: column;
				align-items: center;

				.leftTips {
					width: 96px;
					line-height: 26px;
				}
			}

			.overdueListRight {
				font-size: 14px;
				color: #101010;
				padding-left: 16px;
				box-sizing: border-box;

				.rightTips {
					line-height: 20px;

					.iconRight {
						float: right;
					}
				}

				.popupRightTips {
					line-height: 20px;

					.iconRight {
						float: right;
					}
				}
			}
		}

		.infoTitle {
			margin: 8px 0;
		}

		.overdueBtn {
			margin: 8px 0;
		}

		.popupBox {
			width: 327px;
			height: 570px;
			padding: 8px;
			border-radius: 16px;

			.returnTimeBox {
				width: 100%;
				height: 36px;
				line-height: 36px;
				padding-left: 8px;
				box-sizing: border-box;
				border: 0.5px solid #eee;
			}
		}
	}

	.overdueHeight {
		height: 100%;
	}
</style>